<template>
  <el-dialog
      :title="isEdit ? '更新' :  '添加信息'"
      :visible="dialogVisible"
      width="30%"
  >
    <div class="demo-input-suffix" style="display: flex;margin: 10px 10px;">
      <span style="width: 25%;display: flex;align-items: center">状态：</span>
      <el-select v-model="group_info.status" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>

    <div class="demo-input-suffix" style="display: flex;margin: 10px 10px;">
      <span style="width: 25%;display: flex;align-items: center">分类：</span>
      <el-select v-model="group_info.categoryid" placeholder="请选择">
        <el-option
            v-for="item in group_list"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
    </div>

    <el-upload
        class="avatar-uploader"
        :action="uploadURL"
        :show-file-list="false"
        name="img"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
      <img v-if="group_info.img" :src=" baseURL+group_info.img" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <span slot="footer" class="dialog-footer">
    <el-button @click="$emit('close')">取 消</el-button>
    <el-button type="primary" @click="open1">确 定</el-button>
            </span>
  </el-dialog>

</template>
<script>
import {WallpaperAdd,WallpaperUpdate} from "@/utils/api/wallpaper";
import {baseURL,uploadURL} from "@/utils/httpRequest/baseURL";
import {beforeAvatarUpload} from "@/utils/upload";


export default {
  props: {
    dialogVisible: {
      type: Boolean,
    },
    info: {
      type: Object,
      default: null
    },
    group_list:{
      type:Array,
      default:()=>[]
    }
  },
  watch: {
    info(newValue, oldValue) {
      if(newValue.id){
        this.isEdit=true
        this.group_info = newValue
      }else {
        this.group_info = {
          img: '',
          categoryid:'',
          status:1
        }
        this.isEdit=false
      }
    },
    dialogVisible(newValue){
      // console.log(newValue,"visable")
    }
  },

  data() {

    return {
      baseURL,
      uploadURL,
      group_info: {
        img: '',
        categoryid:'',
        status:'',
        grouplist:0,
      },
      isEdit: false,
      options: [{
        value: 1,
        label: '正常'
      }, {
        value: 0,
        label: '隐藏'
      }],
      status: '',

    }
  },
  methods: {
    beforeAvatarUpload,
    async open1(newValue) {
      if (this.isEdit === false) {
        const res = await WallpaperAdd(this.group_info);
        if (res.code === 200) {
          console.log(res,'res');
          this.tableData = res.data;
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          // 刷新页面
          location.reload();
        } else {
          this.$message.error(res.data.msg || '添加失败');
        }
      } else if (this.isEdit === true) {
        let id = this.group_info.id;
        const res = await WallpaperUpdate(id, this.group_info);
        if (res.code === 200) {
          this.tableData = res.data;
          this.$message({
            message: '修改成功',
            type: 'success',
          });
          // 刷新页面
          location.reload();
        } else {
          this.$message.error(res.data.msg || '修改失败');
        }
      }
    },


    //图片上传
    handleAvatarSuccess(res, file) {
      this.group_info.img = res
      console.log(res);
    },
  }
}

</script>


<style scoped>
.avatar-uploader .el-icon-plus, .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>